<template>
	<div class="add-delegation">
		<div class="delegation-btn">
			<a-breadcrumb>
				<a-breadcrumb-item>
					<router-link
						:to="{
							name: 'delegation',
							query: {
								tab:
									fromPosition === 'creat_byme'
										? 'creat_byme'
										: 'creat_byother',
							},
						}"
					>
						{{
							fromPosition === 'creat_byme'
								? $t('delegate.delegate', '委托授权')
								: $t('delegate.delegate', '代理创建')
						}}
					</router-link>
				</a-breadcrumb-item>
				<a-breadcrumb-item v-if="!defaultType" style="font-weight: bold">{{
					$t('delegate.add', '新增')
				}}</a-breadcrumb-item>
				<a-breadcrumb-item
					v-else-if="defaultType && !ifView"
					style="font-weight: bold"
					>{{ $t('delegate.add', '修改') }}</a-breadcrumb-item
				>
				<a-breadcrumb-item
					v-else-if="defaultType && ifView"
					style="font-weight: bold"
					>{{ $t('delegate.view', '查看') }}</a-breadcrumb-item
				>
			</a-breadcrumb>
			<div class="delegation-btn-box">
				<a-button v-if="!ifView" @click="goHome">
					{{ $t('personalCenter.cancel', '取消') }}
				</a-button>
				<a-button
					:loading="saveDraftLoading"
					style="margin: 0px 12px"
					type="primary"
					@click="delegateHandle('0')"
					v-if="!ifView"
				>
					{{ $t('delegate.draftBtn', '保存草稿') }}
				</a-button>
				<a-button
					:loading="entrustmentLoading"
					type="primary"
					@click="delegateHandle('1')"
					v-if="!ifView"
				>
					{{ $t('delegate.delegateBtn', '发起委托') }}
				</a-button>
				<a-button v-if="ifView" @click="goHome">
					{{ $t('delegate.back', '返回') }}
				</a-button>
				<div ref="modal">
					<a-modal
						v-model:visible="visible"
						centered
						title="委托待办"
						width="550px"
						ok-text="确认"
						:get-container="() => $refs.modal"
						@ok="handleOk"
						@cancel="handlerCancel"
					>
						<a class="icon-circle">
							<img src="@/assets/images/tips.svg" />
						</a>
						<p v-if="agentUser" class="delegate-message">
							请确认是否将 【{{ entrustedUser.employee_name }}】
							的待办任务委托给 【{{ agentUser.employee_name }}】 ？
						</p>
						<a class="client-bg">
							<img src="@/assets/images/Rectangle.svg" />
						</a>

						<p class="client">委托人</p>
						<p class="client-name showName" :title="entrustedUser.employee_name">{{ entrustedUser.employee_name }}</p>
						<div class="client-avatar">
							<ok-person-cell
								width="30px"
								height="30px"
								.person-info="entrustedUser"
							></ok-person-cell>
						</div>
						<a class="client-img"><img src="@/assets/images/Frame.svg" /> </a>
						<a class="agent-arrow">
							<img src="@/assets/images/Group.svg" />
						</a>
						<a class="agent-bg">
							<img src="@/assets/images/Rectangle.svg" />
						</a>

						<p class="agent">被委托人</p>
						<p v-if="agentUser" class="agent-name showName" :title="agentUser.employee_name">
							{{ agentUser.employee_name }}
						</p>
						<div v-if="agentUser" class="agent-avatar">
							<ok-person-cell
								width="30px"
								height="30px"
								.person-info="agentUser"
							></ok-person-cell>
						</div>

						<a class="agent-img">
							<img src="@/assets/images/Frame1.svg" />
						</a>

						<a-switch v-model:checked="formData.sendMsg" class="agent-switch" />
						<p class="message-reminder">委托人将收到待办消息提醒</p>
					</a-modal>
				</div>
			</div>
		</div>
		<a-form class="delegation-header" layout="vertical">
			<a-form-item
				:colon="false"
				:label="$t('delegate.agentTitle', '委托人')"
				class="delegation-header-employee"
				required
			>
				<ok-employee-select
					.disabled="!isSysAdmin || ifView || fromPosition === 'creat_byme'"
					.person-format="tenantDetail.person_format"
					.dept-full-path="tenantDetail.secrecy"
					.remote-method="searchConsigner"
					organization-type="INTERNAL"
					width="100%"
					.value="entrustedValueData"
					class="employee-search"
					.placeholder="
						$t('delegate.proxyAgent', '可使用姓名或邮箱搜索添加委托人')
					"
					.update="updateSelectEntrusted"
				></ok-employee-select>
				<div
					v-show="rules.entrustedRequired"
					style="color: rgb(252, 13, 5); padding-top: 8px"
				>
					{{ $t('delegate.emptyAgent', '请选择委托人') }}
				</div>
			</a-form-item>
			<a-form-item
				:colon="false"
				:label="$t('delegate.consignee', '被委托人')"
				class="delegation-header-time"
				required
			>
				<ok-employee-select
					.person-format="tenantDetail.person_format"
					.dept-full-path="tenantDetail.secrecy"
					.remote-method="searchConsignee"
					organization-type="INTERNAL"
					width="100%"
					.value="CoordinatorValueData"
					class="employee-search"
					.placeholder="
						$t('delegate.proxyAgent', '可使用姓名或邮箱搜索添加被委托人')
					"
					.update="updateSelect"
					.disabled="ifView"
				></ok-employee-select>
				<div
					v-show="rules.agentRequired"
					style="color: rgb(252, 13, 5); padding-top: 8px"
				>
					{{ $t('delegate.emptyConsignee', '请选择被委托人') }}
				</div>
			</a-form-item>
			<a-form-item
				:colon="false"
				:label="$t('delegate.timeTitle', '委托代理时间')"
				class="delegation-header-time"
				required
			>
				<div class="box-date-picker">
					<a-range-picker
						v-model:value="formData.DefinitiontimeValueData"
						style="width: 100%"
						format="YYYY-MM-DD"
						:placeholder="[
							$t('informationPortal.StartTime', '起始时间'),
							$t('informationPortal.announcedEndPlaceholder', '结束时间'),
						]"
						:disabled="[ifView, ifView]"
						@change="onChange"
					>
						<template #suffixIcon>
							<i class="low-code iconrili1" />
						</template>
					</a-range-picker>
				</div>
				<div
					v-show="rules.timeRequired"
					style="color: rgb(252, 13, 5); padding-top: 8px"
				>
					{{ $t('delegate.emptyTime', '请选择代理起止时间') }}
				</div>
			</a-form-item>
			<a-form-item
				:colon="false"
				class="delegation-header-time deptment-wrapper"
			>
				<template #label>
					<div class="label-wrapper">
						<div class="dept-title">
							{{ $t('delegate.submitDepartment', `提交人${newOrgText()}`) }}
						</div>
						<a-checkbox v-model:checked="includeSub" :disabled="ifView">{{
							$t('delegate.Includesubdepartments', `包含子${newOrgText()}`)
						}}</a-checkbox>
					</div>
				</template>
				<ok-department-select
					.multiple="true"
					mode="tree"
					department-type="INTERNAL"
					class="employee-search"
					.update="updateSelectDept"
					:model-title="`${newOrgText()}选择`"
					width="100%"
					.value="submitDepartment"
					.placeholder="
						$t('delegate.emptyAgent', `请选择提交人${newOrgText()}`)
					"
					.disabled="ifView"
				></ok-department-select>
			</a-form-item>
		</a-form>
		<a-layout class="delegation-main">
			<div class="delegation-main-title">
				<div class="delegation-main-agents">
					<div>
						<span class="delegation-main-tasks"></span>
						<span class="delegation-main-span">{{
							$t('delegate.delegationTask', '委托代理任务')
						}}</span>
					</div>
					<p class="delegation-main-p">
						{{
							$t(
								'delegate.taskTitleTip',
								'若你的代理人授权他人审批其单据，你的审批任务不会被传递'
							)
						}}
					</p>
					<div
						v-show="rules.taskRequired"
						style="color: rgb(252, 13, 5); padding-bottom: 8px; font-size: 14px"
					>
						{{ $t('delegate.emptyTask', '请选择代理任务') }}
					</div>
				</div>
				<input-search
					style="width: 388px; height: 32px"
					:search-placeholder="
						$t('delegate.searchabletaskName', '可搜索任务名称')
					"
					@search="changeHandler"
				></input-search>
			</div>
			<div class="delegation-main-all">
				<a-checkbox
					v-model:checked="checkAll"
					:indeterminate="indeterminate"
					:disabled="ifView"
					@change="onCheckAllChange"
				>
					{{ $t('delegate.delegateAll', '代理我的全部任务') }}
				</a-checkbox>
			</div>
			<div v-show="processList.length === 0" class="detegation-empty">
				<div class="detegation-empty-box">
					<img
						class="detegation-empty-image"
						src="@/assets/images/nothing.svg"
					/>
					<span class="detegation-empty-text">{{
						$t('delegate.noSearchResults', '暂无搜索结果')
					}}</span>
				</div>
			</div>
			<div v-for="(item, index) in processList" :key="index">
				<DelegationCheckbox
					:ref="delegationCheckboxRef(item.type_key)"
					:check-all-parent="checkAll"
					:indeterminate-parent="indeterminate"
					:data-list="item"
					:temporary-storage="processKeyListArray[item.type_key]"
					:disabled="ifView"
					@listChange="listChange"
				/>
			</div>
		</a-layout>
	</div>
</template>

<script setup lang="ts">
import useModel from './hooks/useModel'
import useHook from './hooks/hook'

import moment, { Moment } from 'moment'
import { useRouter } from 'vue-router' //引入路由

import { i18n } from '@/locales'
import { result } from 'lodash'
import { Loading } from 'vant'
import { array } from 'vue-types'
import dayjs, { Dayjs } from 'dayjs'
import advanceFormat from 'dayjs/plugin/advancedFormat'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import localeData from 'dayjs/plugin/localeData'
import weekday from 'dayjs/plugin/weekday'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import weekYear from 'dayjs/plugin/weekYear'
import {
	onMounted,
	ref,
	watch,
	onBeforeUpdate,
	onUpdated,
	reactive,
	toRaw,
	createVNode,
	nextTick,
	computed,
	unref,
} from 'vue'

import DelegationCheckbox from './component/delegationCheckbox.vue'
import InputSearch from '@/entry_desktop/components/InputSearch/index.vue'
import { ColSize } from 'ant-design-vue/lib/grid/Col'
import { ValidateErrorEntity } from 'ant-design-vue/lib/form/interface'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

import { message, Modal } from 'ant-design-vue'
import { forEach, set } from 'lodash'
import { Item } from 'ant-design-vue/lib/vc-menu'
import { apiInit } from '@/services' //引入接口
import { useStore } from 'vuex'
dayjs.extend(customParseFormat)
dayjs.extend(advanceFormat)
dayjs.extend(weekday)
dayjs.extend(localeData)
dayjs.extend(weekOfYear)
dayjs.extend(weekYear)
const { $t } = i18n

const visible = ref<boolean>(false)
const router = useRouter()
const store = useStore()
// 当前登录人
const userInfo = computed(() => store.state.userInfo)
// 是否是管理员
const isSysAdmin = store.state.userInfo.sys_admin

interface IformData {
	id: string
	agentId: string
	entrustedId: string
	isAll: string
	processKeyList: Array<string>
	startDate: string
	endDate: string
	status: string
	endOpen: boolean
	sendMsg: boolean
	DefinitiontimeValueData: Array<any>
	has_child: number
	start_dept_id: Array<string>
}
interface DelayLoading {
	delay: number
}

// 根据组织开关判断显示部门、组织
const newOrgText = () => {
	const isOPen = JSON.parse(localStorage.getItem('tenantDetail') || '{}').data
		.tenant_auth?.biz_org
	return isOPen ? '组织' : '部门'
}

const {
	getProcessList,
	processList,
	addDelegate,
	editDelegate,
	mandateForLegislator,
	getEmployeesInfo,
} = useModel()

const defaultType: any = ref(false) // 默认选中的数据
const saveDraftLoading = ref<boolean | DelayLoading>(false) // 保存草稿
const entrustmentLoading = ref<boolean | DelayLoading>(false) // 发起委托
const CoordinatorValueData = ref() // 被委托代理人默认选中
const fromPosition = router.currentRoute.value.query.from || undefined
const entrustedValueData = ref(
	fromPosition === 'creat_byme' ? unref(userInfo).employee_id : ''
) // 委托代理人默认选中
const submitDepartment = ref() // 部门默认选中
const includeSub = ref(false) // 是否包含子部门
const processKeyListArray: any = ref({}) //获得被选中数据=>temporaryStorage=>value
const ifView = ref<boolean>(false)
const mode = ref('')
const totalLength = ref(0)

//获得子组件中属性及方法
const itemRefs: any = ref({})
const delegationCheckboxRef = (typeKey: string) => (el: HTMLElement) => {
	itemRefs.value[typeKey] = el
}

const formData: IformData = reactive({
	id: '',
	agentId: '',
	entrustedId: entrustedValueData,
	isAll: '',
	processKeyList: [],
	startDate: '',
	endDate: '',
	status: '',
	date1: undefined,
	endOpen: false,
	sendMsg: true,
	DefinitiontimeValueData: [],
	has_child: 0,
	start_dept_id: [],
})

const rules: any = reactive({
	agentRequired: false,
	entrustedRequired: false,
	timeRequired: false,
	taskRequired: false,
})
const searchValue = ref('') // 搜索
const checkAll = ref(false) // 全部选中
const indeterminate = ref(false) // 将要被选中
let tenantDetail: any = reactive({}) // 准备ok-employee-select需要传入的参数

// 委托授权代理人选,搜索接口
const searchConsigner = async (value: string) => {
	return await getEmployeesInfo(value, false)
}
const searchConsignee = async (value: string) => {
	return await getEmployeesInfo(value, fromPosition !== 'creat_byme')
}

//时间组件不可选择过去时间
const disabledDate = (current: Moment) => {
	return current && current < moment().subtract(1, 'day')
}

//获得开始时间结束时间
const onChange = (value: Moment[], dateString: string[]) => {
	if (dateString[0] === '') {
		formData.startDate = ''
		formData.endDate = ''
		return
	}
	const endTime = moment(dateString[1] + ' 23:59')
	const todayTime = moment(moment().format('YYYY-MM-DD' + ' 23:59'))

	if (endTime < todayTime) {
		message.warning(
			$t('delegate.endDateTip', '委托代理的结束时间必须大于当前时间')
		)
		formData.DefinitiontimeValueData = []
	} else {
		formData.startDate = `${dateString[0]} 00:00`
		formData.endDate = `${dateString[1]} 23:59`
	}
}

//判断是否全部选中
const whetherAllAreSelected = (type: string) => {
	if (
		totalLength.value &&
		formData.processKeyList.length === totalLength.value
	) {
		checkAll.value = true
		indeterminate.value = false
	} else if (formData.processKeyList.length === 0) {
		checkAll.value = false
		indeterminate.value = false
	} else {
		checkAll.value = false
		indeterminate.value = true
	}
	if (searchValue.value) {
		const array: any[] = []
		processList.value.forEach((Item: any) => {
			Item.process_merge_bos.forEach((element: any) => {
				array.push(element.process_key)
			})
		})
		const newList = array.filter((val: any) => {
			return formData.processKeyList.indexOf(val) > -1
		})
		if (newList.length === totalLength.value) {
			checkAll.value = true
			indeterminate.value = false
		} else if (newList.length === 0) {
			checkAll.value = false
			indeterminate.value = false
		} else {
			indeterminate.value = true
		}
	}
}

watch(
	() => processList.value,
	() => {
		if (!searchValue.value) {
			whetherAllAreSelected('watch=>processList.value')
		}
	}
)

// 根据id获取要被选中得任务详情
const entrustedfredrick = async (id: any, status?: any) => {
	const joggle =
		formData.entrustedId !== unref(userInfo).employee_id && isSysAdmin
	const data = await mandateForLegislator(id, joggle, status)
	data.forEach((item: any) => {
		if (processKeyListArray.value[item.type_key] === undefined) {
			processKeyListArray.value[item.type_key] = []
		}
		processKeyListArray.value[item.type_key] = item.process_merge_bos.map(
			(bos: any) => {
				return bos.process_key
			}
		)
	})
	let arr: any[] = []
	for (const key in processKeyListArray.value) {
		arr = arr.concat(processKeyListArray.value[key])
	}
	formData.processKeyList = arr
	whetherAllAreSelected('entrustedfredrick')
}

const variableName: any = router.currentRoute.value.query // 获得修改数据

//判断是哪个面包屑
if (Object.keys(variableName).length !== 0) {
	// 如果只有一个form属性，仍为新增，不为编辑或查看
	if (Object.keys(variableName).length !== 1) {
		defaultType.value = true
	}
	variableName.mode
		? variableName.mode === 'view' // 如果是查看模式
			? (ifView.value = true)
			: (ifView.value = false)
		: (ifView.value = false)
}

//获得从修改跳转过来得数据
const acquireHistorical = () => {
	if (
		Object.keys(variableName).length !== 0 &&
		Object.keys(variableName).length !== 1
	) {
		const { employee_id, id, start_date, end_date, send_msg } = variableName
		CoordinatorValueData.value = employee_id
		if (variableName.consigner_id) {
			entrustedValueData.value = formData.entrustedId =
				variableName.consigner_id
		}
		if (variableName.start_dept_id) {
			let ids = JSON.parse(variableName.start_dept_id)
			submitDepartment.value = formData.start_dept_id = ids
		}
		if (variableName.has_child) {
			includeSub.value = variableName.has_child == 1 ? true : false
			formData.has_child = variableName.has_child
		}
		let status = null
		if (variableName.status) status = variableName.status
		if (variableName.mode) mode.value = variableName.mode

		formData.DefinitiontimeValueData = [
			dayjs(start_date, 'YYYY-MM-DD'),
			dayjs(end_date, 'YYYY-MM-DD'),
		]
		formData.startDate = start_date
		formData.endDate = end_date
		formData.id = id
		formData.sendMsg = Boolean(+send_msg)
		entrustedfredrick(id, status)
	}
}

//监听(委托代理人-委托代理时间-委托代理任务)value值不为空取提示状态
watch(
	() => {
		return formData.agentId
	},
	state => {
		rules.agentRequired = !formData.agentId
	}
)
watch(
	() => {
		return formData.entrustedId
	},
	state => {
		rules.entrustedRequired = !formData.entrustedId
	}
)

watch(
	() => {
		return formData.processKeyList
	},
	state => {
		rules.taskRequired = !(formData.processKeyList
			? formData.processKeyList.length
			: '')
	}
)

watch(
	() => [formData.endDate, formData.startDate],
	([cur, old], [newcount, newtitle]) => {
		if (formData.endDate && formData.startDate) {
			rules.timeRequired = !formData.startDate || !formData.endDate
		}
	}
)

//委托代理人
const agentUser = ref<any>(null)
const entrustedUser = ref<any>(unref(userInfo))
const updateSelect = (ids: any, users: any[]) => {
	formData.agentId = ids[0]
	agentUser.value = users[0] || null
}
const updateSelectEntrusted = (ids: any, users: any[]) => {
	formData.entrustedId = ids[0]
	entrustedUser.value = users[0] || null
}
const updateSelectDept = (ids: any, users: any[]) => {
	submitDepartment.value = ids
	formData.start_dept_id = ids
}

//搜索可选任务
const changeHandler = (value: string) => {
	searchValue.value = value
	getProcessList(searchValue.value)
}

//代理我的全部任务
const onCheckAllChange = (e: any) => {
	Object.keys(itemRefs.value).map((key: string) => {
		const isExists = processList.value.find(item => item.type_key === key)
		if (isExists) {
			const element = itemRefs.value[key]
			element.checkAll = e.target.checked
			if (element.checkAll === true) {
				element.onCheckAllChange(element.type_key)
			} else {
				//优化数据全量直接为空----无搜索条件也这直接为空---
				if (
					processKeyListArray.value[key]?.length ==
						isExists.process_merge_bos.length ||
					!searchValue.value
				) {
					processKeyListArray.value[key] = []
				} else {
					isExists.process_merge_bos.forEach(
						(item: { process_key: string; process_name: string }) => {
							const index = processKeyListArray.value[key].indexOf(
								item.process_key
							)
							if (index > -1) {
								processKeyListArray.value[key].splice(index, 1)
							}
						}
					)
				}
				let arr: any[] = []
				for (const key in processKeyListArray.value) {
					arr = arr.concat(processKeyListArray.value[key])
				}
				formData.processKeyList = arr
				whetherAllAreSelected('onCheckAllChange')
			}
		}
	})
}

//获得选中提交数据
const listChange = (processKey: any, checkType: string, checked: boolean) => {
	if (checked === true) {
		if (processKeyListArray.value[checkType] === undefined) {
			processKeyListArray.value[checkType] = []
		}
		const hasKey = processKeyListArray.value[checkType].includes(processKey)
		if (!hasKey) {
			processKeyListArray.value[checkType].push(processKey)
		}
	} else {
		processKeyListArray.value[checkType].splice(
			processKeyListArray.value[checkType].indexOf(processKey),
			1
		)
	}

	let arr: any[] = []
	for (const key in processKeyListArray.value) {
		arr = arr.concat(processKeyListArray.value[key])
	}
	formData.processKeyList = arr
	whetherAllAreSelected('listChange')
}

//返回
const goHome = () => {
	if (mode.value !== 'view') {
		Modal.confirm({
			icon: createVNode(ExclamationCircleOutlined),
			content: $t(
				'delegate.confirmTip',
				'您所做的操作尚未保存，是否确定离开？'
			),
			okText: $t('personalCenter.confirm', '确认'),
			cancelText: $t('personalCenter.cancel', '取消'),
			onOk() {
				return new Promise((resolve, reject) => {
					router.go(-1)
					setTimeout(Math.random() > 0.5 ? resolve : reject, 0)
				}).catch(() => console.log('Oops errors!'))
			},
		})
	} else {
		router.go(-1)
	}
}
//发起委托
const handleOk = async (e: MouseEvent) => {
	visible.value = false
	if (
		formData.agentId !== '' &&
		formData.entrustedId !== '' &&
		formData.endDate !== '' &&
		formData.startDate !== '' &&
		formData.processKeyList.length > 0
	) {
		formData.start_dept_id = submitDepartment.value
		formData.has_child = includeSub.value ? 1 : 0
		formData.isAll = checkAll.value ? '1' : ''
		entrustmentLoading.value = true
		Object.keys(variableName).length !== 0 &&
		Object.keys(variableName).length !== 1
			? await editDelegate(
					formData,
					Boolean(isSysAdmin),
					formData.entrustedId !== unref(userInfo).employee_id
			  )
			: await addDelegate(
					formData,
					Boolean(isSysAdmin),
					formData.entrustedId !== unref(userInfo).employee_id
			  )
	}
}
// 发起委托取消
const handlerCancel = () => {
	entrustmentLoading.value = false
	saveDraftLoading.value = false
}
// 保存草稿
const delegateHandle = async (type: string) => {
	formData.status = type
	rules.agentRequired = !formData.agentId
	rules.entrustedRequired = !formData.entrustedId
	rules.timeRequired = !formData.startDate || !formData.endDate
	rules.taskRequired = !(formData.processKeyList
		? formData.processKeyList.length
		: '')
	if (
		formData.agentId &&
		formData.entrustedId &&
		formData.endDate &&
		formData.startDate &&
		formData.processKeyList.length
	) {
		visible.value = true
	}
	// 开始时间不能大于结束时间
	if (
		new Date(formData.startDate ? formData.endDate : '') <=
		new Date(formData.endDate ? formData.startDate : '')
	) {
		message.warning($t('delegate.warningTip', '结束时间应晚于开始时间'))
		return
	}
	if (
		formData.agentId &&
		formData.agentId !== '' &&
		formData.entrustedId &&
		formData.entrustedId !== '' &&
		formData.endDate !== '' &&
		formData.startDate !== '' &&
		formData.processKeyList.length > 0
	) {
		if (type === '0') saveDraftLoading.value = true
		if (type === '1') entrustmentLoading.value = true
	}
}

onMounted(async () => {
	let temp = JSON.parse(localStorage.getItem('tenantDetail') || '{data: ""}')
	tenantDetail = { ...temp.data }
	await getProcessList(searchValue.value)
	processList.value.forEach((Item: any) => {
		totalLength.value += Item.process_merge_bos.length
	})
	acquireHistorical()
})
onBeforeUpdate(() => {
	itemRefs.value = {}
})
</script>

<style lang="less" scoped>
.add-delegation {
	/deep/ .ant-checkbox-disabled .ant-checkbox-inner {
		background-color: #f5f6f7;
	}
	/deep/ .ant-checkbox-indeterminate .ant-checkbox-inner:after {
		width: 10px;
	}
	.delegation-btn {
		/deep/.ant-modal-body {
			height: 229px;
		}
		/deep/.anticon {
			color: #ffffff;
		}

		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		margin-top: -6px;
		.delegation-btn-box {
			.icon-circle {
				cursor: auto;
				position: absolute;
				display: block;
				width: 22px;
				height: 22px;
				top: 78.41px;
				left: 24.41px;
			}

			.delegate-message {
				position: absolute;
				width: 455px;
				height: 20px;
				left: 49px;
				top: 81px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 600;
				font-size: 17px;
				line-height: 20px;
				color: #1f2329;
				flex: none;
				order: 1;
				flex-grow: 0;
				margin: 0px 10px;
			}
			.client-bg {
				cursor: auto;
				position: absolute;
				width: 174px;
				height: 100px;
				left: 24px;
				top: 138px;
				background: linear-gradient(
					269.48deg,
					#ebf5ff 0.49%,
					rgba(235, 241, 255, 0) 144.33%
				);
				border-radius: 4px;
			}
			.client {
				cursor: auto;
				position: absolute;
				width: 77.73px;
				height: 20px;
				left: 43px;
				top: 151px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 16px;
				line-height: 20px;
				color: #646a73;
			}
			.client-name {
				position: absolute;
				left: 79.59px;
				top: 182.24px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 600;
				font-size: 18px;
				line-height: 25px;
				color: #1f2329;
				transform: matrix(1, 0, 0, 1, 0, 0);
			}
			.showName{
				display: inline-block;
				width: 22%;
				overflow: hidden;
				white-space: nowrap; 
				text-overflow: ellipsis;
				z-index: 1;
			}
			.client-avatar {
				position: absolute;
				top: 180px;
				left: 43px;
			}
			.client-img {
				cursor: auto;
				position: absolute;
				width: 38px;
				height: 38px;
				left: 151px;
				top: 176px;
			}
			.agent-arrow {
				cursor: auto;
				position: absolute;
				width: 122px;
				height: 31px;
				left: 214px;
				top: 157px;
			}
			.agent-bg {
				cursor: auto;
				position: absolute;
				width: 174px;
				height: 100px;
				right: 24px;
				top: 138px;
				background: linear-gradient(
					269.48deg,
					#ebf1ff 0.49%,
					rgba(235, 241, 255, 0) 144.33%
				);
				border-radius: 4px;
			}
			.agent {
				cursor: auto;
				position: absolute;
				width: 77.73px;
				height: 20px;
				right: 101.27px;
				top: 151px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 16px;
				line-height: 20px; /* identical to box height, or 143% */ /*
辅色/N600-次要文案、通用icon */
				color: #646a73;
			}
			.agent-name {
				position: absolute;

				left: 407.59px;

				top: 182.24px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 600;
				font-size: 18px;
				line-height: 25px;
				color: #1f2329;
				transform: matrix(1, 0, 0, 1, 0, 0);
			}
			.agent-avatar {
				position: absolute;
				top: 180px;
				right: 148.9px;
			}
			.agent-img {
				cursor: auto;
				position: absolute;
				width: 38px;
				height: 38px;
				right: 33px;
				top: 176px;
			}
			.agent-switch {
				position: absolute;
				display: inline;
				left: 31px;
				top: 288px; /* 品牌色/正常 */
			}
			.message-reminder {
				position: absolute;
				width: 173px;
				height: 20px;
				left: 73px;
				bottom: 28px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				line-height: 20px; /* identical to box
height, or 143% */
				color: #646a73; /* Inside auto layout */
				flex: none;
				order: 1;
				flex-grow: 0;
				margin: 0px 10px;
			}
			:deep.ant-btn {
				position: absolute;

				right: 90.35px;
				bottom: 23.32pxpx;
			}
		}
	}

	:deep {
		.ant-form label {
			font-size: 16px;
		}
		.ant-calendar-range-picker-input {
			width: 47%;
		}
		.ant-calendar-range-picker-input:nth-child(1) {
			text-align: left;
		}
		.ant-calendar-range-picker-input:nth-last-child(2) {
			text-align: right;
		}
	}
	.delegation-header {
		display: flex;
		.ant-form-item {
			flex: 1;
		}
		.delegation-header-employee,
		.delegation-header-time {
			background: @rok-white-bg;
			padding: 24px;
			border-radius: 6px;
			:deep .ant-form-item-no-colon {
				width: 100%;
				.label-wrapper {
					width: 100%;
				}
			}
		}
		.deptment-wrapper {
			.label-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.ant-checkbox-wrapper {
					font-size: 14px;
					color: #1f2329;
					font-weight: 400;
					/deep/.ant-checkbox + span {
						padding-right: 0;
					}
				}
			}
		}
		.delegation-header-time {
			margin-left: 16px;
		}
		:deep(.ant-picker-active-bar) {
			display: none;
		}
	}
	.delegation-main {
		margin-top: 16px;
		background: @rok-white-bg;
		border-radius: 6px;
		padding: 24px;
		.detegation-empty {
			height: calc(100vh - 394px);
			width: 100%;
			position: relative;
			.detegation-empty-box {
				position: absolute;
				left: 50%;
				top: 43%;
				display: flex;
				flex-flow: column;
				align-items: center;
			}
			.detegation-empty-image {
				display: inline-block;
				width: 180px;
				height: 180px;
			}
			.detegation-empty-text {
				font-size: 15px;
				color: #8f959e;
				margin-top: 10px;
			}
		}
		.delegation-main-title {
			display: flex;
			justify-content: space-between;
			padding-bottom: 9px;
			.delegation-main-agents {
				display: flex;
				flex-flow: column;
				align-items: flex-start;
				.delegation-main-tasks::before {
					display: inline-block;
					color: #ff6459;
					font-size: 14px;
					font-family: SimSun, sans-serif;
					line-height: 1;
					content: '*';
					font-weight: bold;
				}
				.delegation-main-span {
					font-weight: bold;
					font-size: 16px;
					padding: 0 4px;
					color: @rok-text-color;
				}
				.delegation-main-p {
					font-size: 14px;
					color: @rok-amount-bg;
					font-family: PingFang SC;
					padding: 8px 0;
				}
			}
			.iconsousuo1 {
				font-size: 14px;
				color: #8f959e;
			}
		}
		.delegation-main-all {
			height: 40px;
			background: @rok-table-header-color;
			line-height: 40px;
			padding-left: 16px;
			.ant-checkbox-wrapper {
				font-size: 15px;
				font-weight: 500;
			}
		}
	}
}
</style>
